<template>
  <b-container fluid>
    <!-- 放一个背景图 -->
    <b-row>
      <b-container fluid class="background" />
    </b-row>

    <!-- 左中右三段式结构 -->
    <b-row style="margin-top: 1%">
      <b-col></b-col>
      <b-col sm="2" class="side">
        <b-list-group>
          <b-list-group-item active-class="active" to="/personSpeace/myTime">
            我的时间线
          </b-list-group-item>
          <b-list-group-item active-class="active" to="/personSpeace/myNote">
            我的笔记本
          </b-list-group-item>
          <b-list-group-item active-class="active" to="/personSpeace/editor">
            我的资料
          </b-list-group-item>
        </b-list-group>
      </b-col>
      <b-col style="background-color: #F5F7F7" sm="6" class="main">
        <transition enter-active-class="animated fadeIn">
          <router-view />
        </transition>
      </b-col>
      <b-col></b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  name: "MySpeace",
  data() {
    return {};
  },
};
</script>

<style scoped lang="css">
.background {
  padding: 0;
  width: 100%;
  height: 300px;
  background-position: center;
  background-size: 100%;
  background-image: url("/src/assets/背景图2.jpg");
}
.main {
  max-width: 700px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.192), 0 0 20px rgba(0, 0, 0, 0.04);
  padding: 0;
  height: 550px;
}
.side {
  max-width: 150px;
}
</style>